<!-- 用户主页 -->
<template>
  <div class="
      alarm-record
      flex flex-direction
      strut-absolute
      margin-top-xl
      padding-lr-xl padding-bottom-xs
    ">
    <!-- <el-form style="height: 100%;margin-left: 5%;">
    <el-button style="width: 30%;height: 30%;font-size: 32px;background-color: #B4FDFF;"> {{ speciesList[0].name }}</el-button>
    <el-button style="width: 30%;height: 30%;font-size: 32px;background-color: #BFBF3D;"> {{ speciesList[1].name }}</el-button>
    <el-button style="width: 30%;height: 30%;font-size: 32px;background-color: #B4FDFF;"> {{ speciesList[2].name }}</el-button>
    <el-button style="width: 30%;height: 30%;font-size: 32px;background-color: #BFBF3D;"> {{ speciesList[3].name }}</el-button>
    <el-button style="width: 30%;height: 30%;font-size: 32px;background-color: #BFBF3D;"> {{  }} </el-button>
    <el-button style="width: 30%;height: 30%;font-size: 32px;background-color: #BFBF3D;"> {{  }}</el-button>
    <el-button style="width: 30%;height: 30%;font-size: 32px;background-color: #BFBF3D;">  {{  }}</el-button>
    <el-button style="width: 30%;height: 30%;font-size: 32px;background-color: #BFBF3D;">  {{  }}</el-button>
    <el-button style="width: 30%;height: 30%;font-size: 32px;background-color: #BFBF3D;">  {{  }}</el-button>
  </el-form> -->

    <!-- <el-table 
    border
    :data="speciesList"
    stripe
    style="width: 100%;"
    >
      <el-table-column align="center"
      label="赛事板块"
      >
      <template slot-scope="scope">
        <span class="spanText"
            >
          {{scope.row.name}}
        </span>
      </template>
      </el-table-column>
    </el-table> -->

    <!-- <el-carousel height="150px">
      <el-carousel-item v-for="item in 4" :key="item">
        <h3 class="small">{{ item }}</h3>
      </el-carousel-item>
    </el-carousel> -->

    <template>
      <el-carousel height="700px" :interval="5000" arrow="hover" type="card">
        <el-carousel-item v-for="item in speciesList.length" :key="item">
          <div style="text-align: ceter;">
            <el-button type="text" @click="ContestView(speciesList[item - 1].id)">
              <h1>
                {{ speciesList[item - 1].name }}
              </h1>
            </el-button>
          </div>

        </el-carousel-item>
      </el-carousel>
    </template>


    <!-- <el-table border :data="speciesList">
    <el-table-column label="1" >
      {{ speciesList[0].name }}
    </el-table-column>
    <el-table-column label="2" >
      {{ speciesList[1].name }}
    </el-table-column>
    <el-table-column label="3">
      {{ speciesList[2].name }}
    </el-table-column>
  </el-table> -->
  </div>
</template>

<script>
import { getContestSpeciesList } from '@/api/eventSection'
export default {
  data() {
    return {
      speciesList: []
    }
  },
  watch: {

  },
  async mounted() {
    this.getContestSpeciesList()
  },
  methods: {
    ContestView(contestSpeciesId) {
      this.$router.push({
        path: '/admin-background/account-management',
        query: {
          contestSpeciesId: contestSpeciesId
        }
      })
    },
    getContestSpeciesList() {
      getContestSpeciesList().then(res => {
        if (res.data.code === 200) {
          this.speciesList = res.data.data
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error'
          })
        }
      })
    },
  }
}
</script>

<style>
.el-carousel__item {
  /* display: flex; */
  /* text-align: center; */
  opacity: 0.9;
}
.el-carousel__item h1{
  font-size: 80px;
  color: #475669;
  text-align: center;
  margin-top: 300px;
}

.el-carousel__item:nth-child(4n) {
  background-color: beige;
}

.el-carousel__item:nth-child(4n+1) {
  background-color: aqua;
}

.el-carousel__item:nth-child(4n+2) {
  background-color: burlywood;
}

.el-carousel__item:nth-child(4n+3) {
  background-color: aquamarine;
}
</style>
